<template>
	<view class="pages">
		<view class="form">
			<view class="form_item">
				<view>{{$t('wallet.addWallet.WalletType')}}</view>
				<view style="position: relative;left: -30rpx;">
					<input type="text" :disabled ='true' :placeholder="$t('wallet.addWallet.InputType')" v-model="walletType">
					<view class="address" v-show="typeShow">
						<view v-for="(item,index) in typeList" :key="item.id" @click="selectType(index)">{{item.name}}</view>
					</view>
				</view>
				<uni-icons :type="typeShow?'top':'bottom'" @click="typeShow=!typeShow"></uni-icons>
			</view>
			<view>
				<view class="form_item" v-show="walletIndex==2">
					<view>{{$t('wallet.addWallet.Name')}}</view>
					<input type="text" :placeholder="$t('wallet.addWallet.InputBindName')" v-model="form.userName">
				</view>
				<view class="form_item" v-show="walletIndex==2">
					<view>{{$t('wallet.addWallet.Bank')}}</view>
					<input type="text" :placeholder="$t('wallet.addWallet.InputBankName')" v-model="form.bankName">
				</view>
				<view class="form_item" v-show="walletIndex==2">
					<view>{{$t('wallet.addWallet.BankCnum')}}</view>
					<input type="text" :placeholder="$t('wallet.addWallet.InputCardNum')" v-model="form.bankCard">
				</view>
				<view class="form_item" v-show="walletIndex==2">
					<view>yape</view>
					<input type="text" v-model="form.yape">
				</view>
			</view>
			<view class="form_item" v-show="walletIndex==1">
				<view>{{$t('wallet.addWallet.Address')}}</view>
				<input type="text" :placeholder="$t('wallet.addWallet.pAddress')" v-model="form.address">
			</view>
			<view class="form_item">
				<view>{{walletIndex==2?$t('wallet.addWallet.WithdrawCode') : $t('wallet.addWallet.Password') }}</view>
				<input type="password" :placeholder="$t('wallet.addWallet.pPassword')" v-model="form.password">
			</view>
		</view>
		<view class="btn" @click="userSaveWallet">{{$t('wallet.addWallet.Sure')}}</view>
	</view>
</template>

<script>
	import { userSaveWallet } from '@/api/api.js'
	export default {
		data() {
			return {
				typeArr: {
					name: 'USDT',
					id: 0
				},
				typeList: [{
					name: 'USDT',
					id: 0
				},{
					name: this.$t('wallet.addWallet.BankCard'),
					id: 1
				}],
				typeShow: false,
				form: {},
				walletType:'',
				walletIndex:'2'
			};
		},
		onLoad() {
			this.walletType = this.typeList[1].name
		},
		methods: {
			// 选择钱包类型
			selectType(index){
				this.walletIndex = index+1
				this.walletType = this.typeList[index].name
				this.form ={}
				this.typeShow = false
				// console.log(index);
			},
			userSaveWallet(){
				userSaveWallet({
					token: uni.getStorageSync('token'),
					address: this.form.address,
					security_password: this.form.password,
					type:this.walletIndex,
					bankcode:this.form.bankName,
					bankuname:this.form.userName,
					bankcardno:this.form.bankCard,
					yape:this.form.yape
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 600)
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('list.Add')
			})
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-input-placeholder{
		color: #ddd;
		font-size: 28rpx;
	}
	.form {
		width: 96%;
		margin: 0 auto;
		font-size: 28rpx;

		.form_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60px;
			border-bottom: #ddd 1px solid;
			padding: 0 10px;
			position: relative;

			&>input {
				flex-grow: 1;
				margin-left: 20px;
				height: 50px;
				color: grey;
			}
			
			.address {
				position: absolute;
				top: 30px;
				left: -10px;
				right: -50px;
				background-color: #ddd;
				z-index: 10;
			
				&>view {
					height: 40px;
					line-height: 40px;
					padding-left: 5px;
					border-bottom: #fff 1px solid;
				}
			}
		}
	}
	.btn{
		position: absolute;
		bottom: 150px;
		left: 10%;
		right: 10%;
		background-color: #00C2C2;
		color: #fff;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
	}
</style>